<template>
	<div v-permission="'自提点管理'" class="bg">
		<div class="bg-box">
			<div class="infiniteUl" id="scroll" v-if="listData.list.length">
				<nut-infiniteloading
					load-icon="refresh2"
					:use-window="false"
					containerId="scroll"
					:has-more="hasMore"
					@load-more="loadMore"
					load-more-txt="没有更多数据了～"
				>
					<div class="bg-item" v-for="item in listData.list" :key="item.id" @click="editBtn(item)">
						<div class="title flex flexBetween">
							<div class="f1">{{ item.place_name ||""}}</div>
							<div class="title-icon-wrap">
								<img
									class="title-icon"
									src="../../assets/addresss/edit.png"
									alt=""
								/>
							</div>
						</div>
						<div class="name">
							<span>{{ item.contact_person }}</span>
							<span style="padding-left:10px">{{ item.phone||"" }}</span>
						</div>
						<div class="name">
							 {{item.city_province}}{{ item.detail_address||"" }}
						</div>
					</div>
				 
				</nut-infiniteloading>
			</div>
				<EMPTY v-else class="empty">
					<div>暂无自提点~</div>
				</EMPTY> 
			<!-- <nut-empty v-else image="empty" description="无内容"></nut-empty> -->
			<div class="bg-btn-box">
				<nut-button
					block
					type="primary"
					color="linear-gradient(to right, #3EBD33, #9FDF4F)"
					@click="addBtn"
					>新增自提点</nut-button
				>
			</div>
		</div>
		<AddRess ref="addRef" @reFresh="reFresh"/>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import EMPTY from "@/components/Empty/empty.vue"
import AddRess from './model/addAddRessMange.vue'
import useAddress from '@/composable/manage/useAddressMange'
const { addBtn, editBtn, addRef,listData,hasMore,loadMore,reFresh } = useAddress()
</script>
<style scoped lang="scss">
.bg {
	background: #f8f9fa;
   
	.bg-box {
		padding: 30px 30px;
	}
	.bg-item {
		padding: 30px 30px;
		background: #fff;
		border-radius: 20px;
		margin-bottom: 20px;
		.title {
			font-size: 30px;
			color: #000;
			font-weight: 500;
			padding-bottom: 10px;
		}
		.name {
			font-size: 26px;
			color: #666;
			padding-bottom: 10px;
		}
	}
	.bg-btn-box {
		position: fixed;
		background: #fff;
		left: 0;
		right: 0;
		bottom: 0;
		height: 112px;
		padding-top: 20px;
		padding-left: 60px;
		padding-right: 60px;
		padding-bottom: 30px;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.title-icon-wrap {
		width: 30px;
		height: 30px;
		padding: 4px 0 4px 0;
	}
	.title-icon {
		width: 30px;
		height: 30px;
	}
}

.infiniteUl {
	 height:calc(100vh - 200px);
	overflow: auto;
	padding-bottom: 20px;
}
.empty{
	position:absolute;
	top:0;
	bottom:200px;
	left:0;
	right:0;
}
</style>
